<template>
    <div class="tealist">
        <img :src="teaList.teacher.avatar" alt="">
        <p>{{teaList.teacher.real_name}}</p>
        <button class="btn" v-if="teaList.flag == 1" @click="collectFn(teaList.teacher.id)">取消关注</button>
        <button class="btn" v-if="teaList.flag == 2" @click="collectFn(teaList.teacher.id)">关注</button>
    </div>
</template>
<script>
import { getTearchDetail, getTearchCollect } from '@/http/request';
export default {
    data() {
        return {
            teaList: {},
        }
    },
    mounted() {
        this.getTearchDetailList()
    },
    methods: {
        async getTearchDetailList() {
            let res = await getTearchDetail(this.$route.query.id)
            console.log(res);
            this.teaList = res.data.data
        },
        async collectFn(id) {
            let res = await getTearchCollect(id)
            console.log(res);
            this.getTearchDetailList()
        }
    }
}
</script>
<style lang="scss" scoped>
.tealist {
    width: 90%;
    height: 100px;
    background-color: #fff;
    border-radius: 5px;
    position: absolute;
    top: 50px;
    left: 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;

    img {
        width: 40px;
        height: 40px;
    }

    .btn {
        border: none;
        width: 100px;
        height: 30px;
        line-height: 30px;
        border-radius: 10px;
        color: #eb6100;
        background-color: #ebeefe;
    }
}
</style>


